<template>
<view class="cardListBox">
    <view class="cardsList">
        <view class="quanyiItem" :style="{ 'backgroundImage': 'url(' + quanyi1_icon + ')' }">
            <view class="quanyiItem_title">{{ quanyiItem.equityName }}</view>
            <view v-if="quanyiItem.totalNum">享受权益：{{ quanyiItem.totalNum }}</view>
            <view>{{ quanyiItem.equityEndTime }}到期</view>
        </view>
    </view>
    <view class="tequan">
        <view class="title">权益详情</view>
        <view class="tequanList">
            <view class="tequanItem" v-for="(item,index) in tequanList" :key="index" :style="{ 'backgroundImage': 'url(' + item.bg + ')' }">
                <view class="tips">
                    <view class="tips2">{{ item.danwei }}</view>
                </view>
                <view class="name">{{ item.name }}{{ item.bounty ? '+'+item.bounty : '' }}</view>
                <view class="name2" v-if="item.hasSend && item.totalNum">{{ item.hasSend }}/{{ item.totalNum }}</view>
            </view>
        </view>

    </view>
    <!-- <view class="details" v-if='quanyiItem.remark'>
        <view class="title">详细说明</view>
        <view class="content">
            {{quanyiItem.remark}}
        </view>
    </view> -->
    <view></view>
    <view></view>
    <view></view>
    <view></view>
    <view></view>
    <view></view>
</view>
</template>

<script>
import {
    getMyCouponPage
} from "@/api/https";
import {
    couponequityDetails
} from "@/api/marketing/coupon";
var app = getApp();

export default {
    data() {
        return {
            defaultColor: uni.getStorageSync('defaultColor_Green'),
            card1_icon: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/card1_icon.png`,
            card2_icon: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/card2_icon.png`,
            kabao_icon: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/icon_kabao.png`,
            jianglijin_icon: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/icon_jianglijin.png`,
            quanyi1_icon: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/quanyi1.png`,
            quanyiItem: {
                name1: "2",
                name2: "权益卡123",
                name3: "7",
                name4: "2023/3/31到期",
            },
            tequanList: [
            ]
        };
    },
    onLoad(e) {
		if(e.id){
			let url = app.globalData.imgUrl
			couponequityDetails(e.id).then(res=>{
				if(res.code==200){
					this.quanyiItem = res.data
					if(res.data.equityCardStr){
						this.tequanList.push({
							danwei: res.data.equityCardStr,
							name:'卡包',
							bg: url +'/group1/operateSchemeImage/icon-kabao.png',
                            bounty: '',
                            hasSend: res.data.hasSend,
                            totalNum : res.data.totalNum,
						})
					}
					if(res.data.equityBoundsStr){
						this.tequanList.push({
							danwei: res.data.equityBoundsStr,
							name:'奖励金',
							bg: url +'/group1/operateSchemeImage/icon_jianglijin3703530708666233956.png',
                            bounty: res.data.rewardBounty,
                            hasSend: res.data.hasSend,
                            totalNum : res.data.totalNum,
						})
					}
					// if(res.data.equityCardStr){
					// 	this.tequanList.push({
					// 		danwei: res.data.equityCardStr,
					// 		name:'免服务费次数',
					// 		bg: url +'/group1/operateSchemeImage/icon_kabao1604538570032989766.png',
					// 	})
					// }
					if(res.data.equityPointsStr){
						this.tequanList.push({
							danwei: res.data.equityPointsStr,
							name:'积分',
							bg: url +'/group1/operateSchemeImage/icon_jifen2011325536646060104216.png',
                            bounty: res.data.rewardIntegral,
                            hasSend: res.data.hasSend,
                            totalNum : res.data.totalNum,
						})
					}
					if(res.data.equityCouponStr){
						this.tequanList.push({
							danwei: res.data.equityCouponStr,
							name:'优惠券包',
							bg: url +'/group1/operateSchemeImage/icon_youhuiquan%2013435170720801394849.png',
                            bounty: '',
                            hasSend: res.data.hasSend,
                            totalNum : res.data.totalNum,
						})
					}
					if(res.data.equityPercentStr){
						this.tequanList.push({
							danwei: res.data.equityPercentStr,
							name:'成长加速',
							bg: url +'/group1/operateSchemeImage/icon_chengzhangjiasu6554029308244187804.png',
                            bounty: '',
                            hasSend: res.data.hasSend,
                            totalNum : res.data.totalNum,
						})
					}
				}
			})
		}
	},
    methods: {
        setTabName(row) {
            console.log(row)
            this.tabIndex = row.tabCode;
        },
        getCouponLists() {
            getUserCouponLists().then((res) => {
                console.log(res);
            });
        },
    },
};
</script>

<style lang="less" scoped>
@import "../../../commin/commin.less";

page {
    background-color: #f5f7fa;
    padding-bottom: 120rpx;
}

.cardListBox {
    width: 100%;
    min-height: 100vh;
    background: #f5f7fa;
    padding-top: 2rpx;
    box-sizing: border-box;
}

.tabNav {
    width: 100%;
    height: 90rpx;
    background: #ffffff;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;

    .tabItem {
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        font-size: 28rpx;
        font-weight: 400;
        color: #909399;
    }
}

.cardsList {
    width: 94%;
    margin: 0rpx auto;

    .quanyiItem {
        width: 100%;
        height: 246rpx;
        margin: 20rpx auto;
        padding: 40rpx;
        box-sizing: border-box;
        background-size: 100% 102%;
        background-repeat: no-repeat;
        background-position: center;
		.quanyiItem_title{
			width: 100%;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

        >view:nth-of-type(1) {
            font-size: 34rpx;
            font-weight: 400;
            line-height: 34rpx;
            color: rgba(212, 186, 162, 1);

        }

        >view:nth-of-type(2) {
            font-size: 26rpx;
            font-weight: 400;
            color: #FFFFFF;
            line-height: 26rpx;
            margin-top: 30rpx;
        }

        >view:nth-of-type(3) {
            margin-top: 50rpx;
            font-size: 24rpx;
            font-weight: 400;
            color: #FFFFFF;
            line-height: 24rpx;
        }
    }
}

.tequan {
    width: 94%;
    // height: 464rpx;
    margin: 20rpx auto;
    background: linear-gradient(360deg, #FFFFFF 0%, #FFFFFF 31%, #F4F6F8 99%, #F4F6F8 100%);
    box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 178, 0.2392);
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    opacity: 1;
    border: 2rpx solid #FFFFFF;
    padding: 40rpx 32rpx;
    box-sizing: border-box;

    .title {
        font-size: 32rpx;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: 400;
        color: #303133;
        line-height: 32rpx;
    }
}

.tequanList {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    margin-top: 30rpx;

    .tequanItem {
        width: 120rpx;
        height: 120rpx;
        margin: 42rpx 45rpx;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center;
        position: relative;

        .tips {
            position: absolute;
            top: 0;
            left: 40rpx;
            height: 28rpx;
            background: #F7A14A;
            border-radius: 16rpx 16rpx 16rpx 0rpx;
            font-size: 20rpx;
            font-weight: 400;
            color: #FFFFFF;
            line-height: 20rpx;
            text-align: center;
            line-height: 28rpx;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
			white-space: nowrap;
			padding: 0 6rpx;
        }

        .name {
            position: absolute;
            bottom: -42rpx;
            left: 50%;
            transform: translateX(-50%);
            font-size: 24rpx;
            font-weight: 400;
            color: #606266;
			white-space: nowrap;
        }
        .name2{
            position: absolute;
            bottom: -70rpx;
            left: 50%;
            transform: translateX(-50%);
            font-size: 24rpx;
            font-weight: 400;
            color: #606266;
			white-space: nowrap;
        }
    }
}

.details {
    width: 94%;
    margin: 20rpx auto;
    background: linear-gradient(360deg, #FFFFFF 0%, #FFFFFF 31%, #F4F6F8 99%, #F4F6F8 100%);
    box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 178, 0.2392);
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    opacity: 1;
    border: 2rpx solid #FFFFFF;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 40rpx 32rpx;
    box-sizing: border-box;

    .tite {
        font-size: 32rpx;
        font-weight: 400;
        color: #303133;
        line-height: 32rpx;
    }

    .content {
        font-size: 28rpx;
        font-weight: 400;
        color: #303133;
        line-height: 34rpx;
    }
}
</style>
